<template>
  <div>
    <ResultAnalysis
      v-for="(resultAnalysis, idx) in analysisGroup"
      :key="resultAnalysis.id"
      :idx="idx"
      :value="resultAnalysis"
      @deleteAnalysis="deleteAnalysis"
      style="margin-bottom: 20px;"
      @input="change"></ResultAnalysis>
    <div style="margin-top: 5px;">
      <el-button plain style="width: 100%;" type="success" @click="addResultAnalysis">新增计算结果解析</el-button>
    </div>
  </div>
</template>

<script>
import ResultAnalysis from "./ResultAnalysis"

export default {
  name: "AnalysisGroup",
  components: {
    ResultAnalysis
  },
  props: ["value"],
  computed: {
    analysisGroup: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    change() {
      this.$emit("input", this.analysisGroup)
    },
    deleteAnalysis(idx) {
      this.analysisGroup.splice(idx, 1)
      this.change()
    },
    addResultAnalysis() {
      let cntId = this.analysisGroup.length > 0 ?this.analysisGroup[this.analysisGroup.length - 1].id + 1 : 0
      this.analysisGroup.push({
        id: cntId,
        sections: [{
          id: 0,
          condition: 0,
          relation: 0,
          value: 0
        }],
        explanation: "",
        result: "default"
      })

      this.change()
    }
  }
}
</script>

<style scoped>

</style>
